<template>
  <div class="course">
    <!-- 搜索组件 -->
    <Search @parentSearch="parentSearch" />
    <!-- 主体组件 -->
    <Main
      @parentdialog="openddialog"
      :parentList="arr"
      @resetList="initCourse()"
    />
    <!-- 分页器 -->
    <MyPage
      @changePage="parentpage"
      :page="page"
      :pagesize="pagesize"
      :total="total"
    />
    <!-- 弹窗 -->
    <Dialog
      @resettable="resettable"
      :dialoglist="dialogList"
      @closedialog="show = false"
      v-if="show"
    />
  </div>
</template>

<script>
import Main from "./components/Main.vue";
import Search from "./components/Search.vue";
import MyPage from "./components/Page.vue";
import Dialog from "./components/Dialog.vue";
import { getCourseApi } from "../../api/courseApi";
export default {
  components: {
    Main,
    Search,
    MyPage,
    Dialog,
  },
  data() {
    return {
      arr: [],
      keyword: "",
      page: 1,
      pagesize: 8,
      total: 0,
      show: false,
      dialogList: "",
    };
  },
  mounted() {
    this.initCourse();
  },
  methods: {
    resettable() {
      this.initCourse();
      this.show = false;
    },
    openddialog(val) {
      this.show = true;
      this.dialogList = val;
    },
    initCourse() {
      var params = {
        keyword: this.keyword,
        page: this.page,
        pagesize: this.pagesize,
      };
      getCourseApi(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.arr = res.data;
          this.total = res.total;
        }
      });
    },
    parentSearch(val) {
      this.keyword = val;
      this.initCourse();
    },
    parentpage(val) {
      this.page = val;
      this.initCourse();
    },
  },
};
</script>

<style></style>
